<template>
  <div>
    <el-dialog
      v-model="props.productVisible"
      title="商品列表"
      :before-close="handleProductClose"
      width="70%"
    >
      <searchBox @handleSearch="handleSearch" @handleReset="handleReset">
        <el-form
          :model="searchFrom.param"
          label-width="auto"
          ref="productRef"
          label-position="left"
          :inline="true"
        >
          <el-form-item label="商品名" prop="param.name">
            <el-input v-model.trim="searchFrom.param.name"></el-input>
          </el-form-item>
          <el-form-item label="商品分类" prop="param.siteCategoryId">
            <div style="width: 200px">
              <el-tree-select
                v-model="searchFrom.param.siteCategoryId"
                :data="siteProductList"
                :props="{ value: 'id', label: 'name', children: 'children' }"
                value-key="id"
                placeholder="请选择"
                check-strictly
              />
            </div>
          </el-form-item>
          <el-form-item label="可用语言" prop="param.languageId">
            <el-select
              v-model="searchFrom.param.languageId"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in sys_language_type"
                :key="item.id"
                :label="item.description"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </searchBox>
      <el-table :data="tableData" height="300" :row-style="tableRowClassName">
        <el-table-column prop="productId" label="ID" align="center" width="50" />
        <el-table-column
          property="host"
          label="商品图"
          align="center"
          width="100"
        >
          <template #default="scope">
            <image-preview
              :src="scope.row.host"
              :width="50"
              :height="50"
            />
          </template>
        </el-table-column>
        <el-table-column property="name" label="商品名" />
        <el-table-column property="categoryName" label="商品分类" align="center" />
        <el-table-column property="price" label="价格" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="choseEdit(scope.row)"
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :total="total"
        :limit="searchFrom.pageSize"
        :page="searchFrom.pageNum"
        @pagination="paginationList"
      >
      </Pagination>

      <el-table :data="selectList" height="300" style="margin-top: 50px">
        <el-table-column prop="productId" label="ID" align="center" width="50" />
        <el-table-column
          property="host"
          label="商品图"
          align="center"
          width="100"
        >
          <template #default="scope">
            <image-preview
              :src="scope.row.host"
              fit="scale-down"
              :width="50"
              :height="50"
            />
          </template>
        </el-table-column>
        <el-table-column property="name" label="商品名" />
        <el-table-column property="name" label="商品分类" align="center" />
        <el-table-column property="price" label="价格" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="danger" @click="choseDelete(scope.row)"
              >取消</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleProductClose">取消</el-button>
          <el-button type="primary" @click="handleProductSure">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup scoped>
import { ref, defineProps, defineEmits, onMounted, watch } from "vue";
const emits = defineEmits(["handleProductClose", "handleProductSure"]);
const { proxy } = getCurrentInstance();
const sys_language_type = ref([]);
const siteProductList = ref([]); //商品分类

const total = ref(0);
const tableData = ref([]);
const newList = ref([]);
const selectList = ref([]);

const props = defineProps({
  productVisible: {
    type: Boolean,
    default: false,
  },
  // 传值数据对象
  listItem: {
    type: Object,
    default: {},
  },
  websiteId: {
    type: String || Number,
    default: "",
  },
});
const searchFrom = ref({
  pageNum: 1,
  pageSize: 10,
  param: {
    websiteId: props.websiteId,
    siteCategoryId: null, //站点商品分类
    name: "", //商品名称
    languageId: null, //语言ID
    status:1
  },
}); //搜索参数
const choseFrom = ref({
  pageNum: 1,
  pageSize: 999,
  param: {
    websiteId: props.websiteId,
    ids: [],
    moduleId: null, //获取勾选时需要用到这个字段参数
  },
});

watch(
  () => props.productVisible,
  () => {
    if (!props.productVisible) return;
    getLanguage(); //获取语言
    console.log();

    if (props.listItem.productLines?.length) {
      props.listItem.productLines.forEach((e) => {
        newList.value.push(e.relatedId)
        console.log(newList.value)
      });
      choseFrom.value.param.ids= newList.value
      getList(); //获取全部商品列表
      choseList(); //获取已勾选的商品列表
    } else {
      choseFrom.value.param.ids=[]
      getList(); //获取全部商品列表
      choseList(); //获取已勾选的商品列表
    }
  }

);
const getList = () => {
  site.general
    .sitewebsiteproductList({
      data: searchFrom.value,
    })
    .then((res) => {
      total.value = res.total ? res.total : 0;
      tableData.value = res.data;
    });
};
// 获取已勾选的商品列表
const choseList = () => {
  choseFrom.value.param.moduleId = props.listItem.groupModuleId;
  site.general
    .sitewebsiteproductList({
      data: choseFrom.value,
    })
    .then((res) => {
      selectList.value = res.data;
    });
};

const handleProductSure = () => {
  if (!newList.value.length) return proxy.$modal.msgWarning(`请添加商品`);
  site.moduleline
    .sitewebsitemodulelineUpdaterelatedids({
      data: {
        relatedIds: newList.value,
        moduleId: props.listItem.groupModuleId,
      },
    })
    .then((res) => {
      if (res.code === 200) {
        newList.value = [];
        emits("handleProductSure");
      }
    });
};

// 语言列表
const getLanguage = () => {
  product.language.languageList().then((res) => {
    sys_language_type.value = res.data;
  });
  let from = {
    pageNum: 1,
    pageSize: 999,
    param: {
      websiteId: props.websiteId,
      languageId: 1,
      fatherId: 0,
    },
  };
  site.general
    .sitecategoryList({
      data: from,
    })
    .then((res) => {
      siteProductList.value = res.data;
    });
};

const tableRowClassName = ({ row }) => {
  if (newList.value.includes(row.productId)) {
    return { backgroundColor: "#f0f9eb" };
  } else {
    return "";
  }
};

// 取消
const handleProductClose = () => {
  newList.value = [];
  selectList.value=[]
  emits("handleProductClose");
};
// 搜索
const handleSearch = () => {
  getList();
};
// 搜索重置
const handleReset = () => {
  proxy.resetForm("productRef");
  getList();
};
// 添加
const choseEdit = (rowItem) => {
  if (newList.value.includes(rowItem.productId)) {
    return proxy.$modal.msgError(`不可重复添加`);
  } else {
    newList.value.push(rowItem.productId);
    choseFrom.value.param.ids = newList.value;
    choseList();
  }
};
// 取消
const choseDelete = (rowItem) => {
  newList.value = newList.value.filter((item) => item !== rowItem.id);
  choseFrom.value.param.ids = newList.value;
  choseList();
};
// 分页
const paginationList = (e) => {
  searchFrom.value.pageNum = e.page;
  searchFrom.value.pageSize = e.limit;
  getList();
};
</script>